<template>
  <div class="playlist-detail" v-loading="isLoading" ref="playlistDetailRef">
    <div class="header">
      <div class="header-left">
        <img :src="coverImgUrl" alt="">
      </div>
      <div class="header-right">
        <div class="title">
          <span class="gedan">歌单</span>
          <span class="title-name">{{name}}</span>
        </div>
        <div class="creator">
          <img :src="avatarUrl" alt="#">
          <span class="creator-name">{{nickname}}</span>
          <span class="create-time">{{createTime}}创建</span>
        </div>
        <ul class="fun">
          <li class="turn-red" @click="selectAllSongs">
            <i class="iconfont iconbofang"></i>
            <span class="all-bofang">播放全部</span>
            <i class="iconfont iconicon-test"></i>
          </li>
          <li>
            <i class="iconfont iconshoucang1"></i>
            <span>收藏</span>
            <span v-if="subscribedCount">({{subscribedCount}})</span>
          </li>
          <li>
            <i class="iconfont iconfenxiang"></i>
            <span>分享</span>
            <span v-if="shareCount">({{shareCount}})</span>
          </li>
          <li>
            <i class="iconfont icondownload"></i>
            <span>下载全部</span>
          </li>
        </ul>
        <div class="tags">
          <span class="detail-item">标签: </span>
          <template v-for="(item, index) of tags" :key="item">
            <span class="tag">{{item}}</span>
            <span class="geli" v-if="tags.length - 1 !== index">/</span>
          </template>
        </div>
        <div class="playCount">
          <span class="detail-item">歌曲: {{trackCount}}</span>
          <span class="detail-item">播放：{{playCount}}</span>
        </div>
        <div class="desc">
          <span class="desc-title">简介:</span>
          <span class="desc-first">{{subDescription}}</span>
          <span class="shenglue" v-show="!showDesc">...</span>
          <i :class="{ 'iconfont': true, 'iconxiangxia': !showDesc, 'iconxiangshang': showDesc, 'zhankai': true }" @click="() => { showDesc = !showDesc }"></i>
        </div>
        <div v-show="showDesc" class="description" v-html="description"></div>
      </div>
    </div>
    <PlaylistContent
      :id="id"
      :commentCount="commentCount"
      :songs="songs"
      @backTop = 'backTop'
    />
  </div>
</template>

<script lang="ts">
import { getPlaylistDetail } from '@/api/playLists'
import { useRoute } from 'vue-router'
import { reactive, toRefs, ref, onMounted } from 'vue'
import PlaylistContent from '@/components/playlistContent/index.vue'
import { player } from '@/store/modules/player'

export default {
  name: 'index',
  components: {
    PlaylistContent
  },
  setup () {
    const route = useRoute()
    let playlistDetail = reactive({
      id: 0,
      name: '',
      coverImgUrl: '',
      userId: 0,
      nickname: '',
      avatarUrl: '',
      tags: [],
      playCount: '',
      subscribedCount: 0,
      shareCount: 0,
      trackCount: 0,
      commentCount: 0,
      createTime: 0,
      subDescription: '',
      description: '',
      songs: []
    })
    const isLoading = ref<boolean>(false)
    const showDesc = ref<boolean>(false)
    const playlistDetailRef = ref<Element | null>(null)
    const init = async () => {
      isLoading.value = true
      try {
        const data = await getPlaylistDetail(route.params.id)
        playlistDetail = Object.assign(playlistDetail, data)
      } catch (e) {
        isLoading.value = false
        console.log(e)
      }
      isLoading.value = false
    }
    const selectAllSongs = () => {
      const playlist = playlistDetail.songs.length ? playlistDetail.songs.map(item => item.id) : []
      if (playlist.length) {
        player.changeSonglist({ list: playlist, id: playlist[0] })
      }
    }
    const backTop = (offsetHeight, commentOffsetTop) => {
      const clientHeight = playlistDetailRef.value.clientHeight
      if (offsetHeight > clientHeight) {
        playlistDetailRef.value.scrollTop = commentOffsetTop
      } else {
        playlistDetailRef.value.scrollTop = playlistDetailRef.value.scrollHeight - clientHeight
      }
    }
    onMounted(() => {
      init()
    })
    return {
      isLoading,
      showDesc,
      playlistDetailRef,
      ...toRefs(playlistDetail),
      selectAllSongs,
      backTop
    }
  }
}
</script>

<style lang="scss" scoped>
.playlist-detail {
  overflow-x: hidden;
  overflow-y: scroll;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding-top: 20px;

  .header {
    padding: 0 18px 20px 20px;
    display: flex;
    flex-direction: row;

    .header-left {

      >img {
        width: 180px;
        height: 180px;
        border-radius: 5px;
      }
    }

    .header-right {
      flex: 1;
      box-sizing: border-box;
      padding-left: 15px;
      font-size: 13px;
      color: #353535;

      .title {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        margin-bottom: 6px;

        .gedan {
          background-color: #fdf5f5;
          border: 1px solid #ec4141;
          color: #ec4141;
          padding: 3px 5px;
          border-radius: 3px;
          margin-right: 8px;
        }

        .title-name {
          flex: 1;
          font-size: 22px;
          font-weight: bold;
          color: #000000;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          overflow: hidden;
          -webkit-box-orient: vertical;
          line-height: 1.4;
        }
      }

      .creator {
        display: flex;
        align-items: center;
        margin-bottom: 6px;

        >img {
          width: 30px;
          height: 30px;
          border-radius: 50%;
        }

        .creator-name {
          color: #2957ec;
          max-width: 200px;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          line-height: 1.4;
          padding-left: 5px;
        }

        .create-time {
          color: #666666;
          line-height: 1.4;
          padding-left: 5px;
        }
      }

      .fun {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        padding-bottom: 16px;

        >li {
          display: flex;
          align-items: center;
          padding: 5px 20px;
          color: #666666;
          height: 30px;
          box-sizing: border-box;
          font-size: 15px;
          border: 1px solid #D0D0D0;
          border-radius: 14px;
          cursor: pointer;

          >i {
            padding-right: 5px;
          }

          &:hover {
            background-color: #e9e9e9;
          }
        }

        .turn-red {
          color: #f2f3f4;
          background-color: #ec4141;
          padding: 5px 10px;

          .all-bofang {
            padding-right: 15px;
            line-height: 20px;
            position: relative;
            display: inline-block;
            height: 20px;

            &:before {
              content: '';
              position: absolute;
              top: -5px;
              right: 7px;
              height: 30px;
              width: .5px;
              background-color: #cab6b6;
              z-index: 6;
            }
          }

          &:hover {
            background-color: #cc3232;
          }
        }

        li ~ li {
          margin-left: 20px;
        }
      }

      .tags {
        padding-bottom: 10px;

        .tag {
          color: #2957ec;
        }

        .geli {
          padding: 0 5px;
        }
      }

      .playCount {
        padding-bottom: 10px;

        span ~ span {
          padding-left: 15px;
        }
      }

      .desc {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        position: relative;
        padding-bottom: 10px;

        .desc-first {
          color: #666666;
          padding-right: 4px;
          padding-left: 5px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
          line-height: 1.4;
        }

        .shenglue {
          padding-right: 20px;
        }

        .zhankai {
          position: absolute;
          top: 2px;
          right: 0;
          color: #666666;
        }
      }

      .description {
        white-space: pre-wrap;
        line-height: 2;
        color: #666666;
      }
    }
  }
}
</style>
